import React from 'react';
import { Card, Descriptions, Button } from 'antd';
import { useIntl } from 'umi';
import { getText } from '@/utils/utils';
import { TIMEFORMAT } from '@/utils/const';
import moment from 'moment';

import type { DataType } from '../../model';

interface Props {
  details: DetailsType;
  loading: boolean;
  dataTypes: DataType[];
  sourceType: DataType[];
  onEditBasicInfoClick: () => void;
}
export interface DetailsType {
  name?: string;
  description?: string;
  createdAt?: number;
  ownerType?: 'org' | 'group' | 'user';
  sourceType?: string;
  dataType?: string;
  dataTask?: string;
  versionNum?: number;
  annotFormat?: string;
  lastestVersion?: string;
  updatedAt?: number;
  platformAnnot?: boolean;
  versionIds?: {
    id: number;
    version: string;
  }[];
}

const BasicInfo: React.FC<Props> = props => {
  const { formatMessage: f } = useIntl();
  const { details, loading, dataTypes, sourceType, onEditBasicInfoClick } = props;

  const dataTasks = dataTypes.filter(i => i.value === details?.dataType)?.[0]?.children || [];
  const annotFormats = dataTasks.filter(i => i.value === details?.dataTask)?.[0]?.children || [];

  return (
    <Card
      loading={loading}
      title={<h1>{f({ id: 'dataSet.detail.title' })}</h1>}
      extra={
        <Button type='primary' onClick={onEditBasicInfoClick}>{f({ id: 'dataSet.detail.edit' })}</Button>
      }
    >
      <Descriptions bordered>
        <Descriptions.Item label={f({ id: 'dataSet.detail.name' })}>
          {details?.name || '-'}
        </Descriptions.Item>
        <Descriptions.Item label={f({ id: 'dataSet.detail.description' })} span={2}>
          {details?.description || '-'}
        </Descriptions.Item>
        <Descriptions.Item label={f({ id: 'global.createdAt' })}>
          {details?.createdAt ? moment(details.createdAt).format(TIMEFORMAT) : '-'}
        </Descriptions.Item>
        <Descriptions.Item label={f({ id: 'dataSet.detail.ownerType' })}>
          {f({ id: `dataSet.detail.ownerType.${details?.ownerType || 'user'}` })}
        </Descriptions.Item>
        <Descriptions.Item label={f({ id: 'dataSet.detail.sourceType' })}>
          {getText(sourceType, details?.sourceType) || '-'}
        </Descriptions.Item>
        <Descriptions.Item label={f({ id: 'dataSet.detail.dataType' })}>
          {getText(dataTypes, details?.dataType) || '-'}
        </Descriptions.Item>
        <Descriptions.Item label={f({ id: 'dataSet.detail.dataTask' })}>
          {getText(dataTasks, details?.dataTask) || '-'}
        </Descriptions.Item>
        <Descriptions.Item label={f({ id: 'dataSet.detail.annotFormat' })}>
          {getText(annotFormats, details?.annotFormat) || '-'}
        </Descriptions.Item>
        <Descriptions.Item label={f({ id: 'dataSet.detail.versionNum' })}>
          {details?.versionNum || '-'}
        </Descriptions.Item>
        <Descriptions.Item label={f({ id: 'dataSet.detail.lastestVersion' })}>
          {details?.lastestVersion || '-'}
        </Descriptions.Item>
        <Descriptions.Item label={f({ id: 'global.updatedAt' })}>
          {details?.updatedAt ? moment(details.updatedAt).format(TIMEFORMAT) : '-'}
        </Descriptions.Item>
      </Descriptions>
    </Card>
  )
}

export default BasicInfo;